Keyboard Operable Test
Overview
The Keyboard Operable test verifies whether all the interactive elements on a web page can be activated using a keyboard, without needing a mouse or another pointing device. This test helps detect violations of WCAG 2.1 Success Criterion 2.1.1 Keyboard (Level A).
People who depend on the keyboard, switch access devices or other assistive technologies must be able to interact with every button, link, menu and control on a page. If an element only responds to mouse clicks but ignores keyboard input, it creates a significant accessibility barrier for these users.
What the Test Verifies
The test focuses on interactive elements, that is, elements the user is expected to activate or use, such as:
- Buttons
- Checkboxes and radio buttons
- Dropdown menus (
<select>) - Tab panels and accordion-style controls
- Any element with a click handler that opens something (modals, tooltips, menus, file pickers, etc.)
For each element, the test verifies that pressing the expected key — Enter, Space or Arrow keys — produces the same result as clicking with the mouse.
How the Test Works — Step by Step
Step 1 — Pause animations
Before the test begins, the tool pauses all CSS animations on the page. This ensures that visual transitions do not interfere with detecting whether an element actually responded to keyboard input.
Step 2 — Discover interactive elements
The test analyses the page (or a specific section you define) and collects all the interactive elements. Each element is identified by its label, ARIA role and other attributes so that it can be evaluated individually.
Step 3 — Test each element
For each interactive element found, the test:
- Focuses the element using the keyboard (Tab navigation).
- Presses the expected key(s) — for example:
- A
<button>→ Enter and Space - A checkbox → Space
- A
<select>dropdown → Space and then Arrow Down - A tab panel → Enter and Space
- A
- Observes whether any change occurred on the page — for example:
- An ARIA attribute changed (for instance
aria-expandedwent fromfalsetotrue) - A menu, modal or panel appeared
- A class or style changed on the element (indicating that it reacted)
- A file picker or dialog opened
- An ARIA attribute changed (for instance
- If the keyboard produces no change, the test tries clicking the element with the mouse to confirm that the element is functional — but simply does not work with the keyboard.
- Reports an issue if the element responds to the mouse but not to the keyboard.
Step 4 — Restore the page state
After testing each element, the tool automatically closes any menu, modal or pop-up that was opened during the test. This avoids interference with the next element to be evaluated.
Step 5 — Report results
At the end, the test summarises how many elements were evaluated, how many were skipped (forms, plain links and other intentionally excluded elements) and how many accessibility problems were found.
What Is Skipped (and Why)
The test intelligently skips certain elements to avoid false positives and prevent unwanted actions:
| Element type | Why it is skipped |
|---|---|
Plain links (<a href="...">) | Navigating away from the page is expected behaviour |
Form fields (<input>, <textarea>) | Pressing Enter could submit the form |
| Submit buttons | The form would be submitted and the page would change |
| Already-selected tabs | No change is expected when selecting something that is already active |
| Visually hidden elements | They are not visible to users |
| Elements with no defined keyboard operation | If there is no standard keyboard interaction, the element is not evaluated |
Common Mistakes and Misunderstandings
"The test reported an issue, but I can operate the element with the keyboard."
What to check:
The element may use a non-standard keyboard interaction. For example, a custom widget that requires Arrow keys instead of Enter or Space may not match the expected key pattern. This can also be an accessibility problem if it does not follow ARIA keyboard interaction conventions.
Make sure the element has the correct ARIA role attribute so the tool knows which keys to expect.
"A <select> was flagged as not keyboard operable."
What to check:
Some custom <select> replacements look like dropdowns but are actually built out of <div> or <ul> elements and may not handle keyboard events correctly.
Native <select> elements should always be keyboard operable. If a custom replacement is used, verify that it implements full keyboard support.
"The element's name or label appears empty or incorrect in the report."
What to check:
The element may have no accessible name (for example a missing aria-label, visible text or alt on images). Although this shows up within the context of the Keyboard Operable test, it is in fact mainly an accessibility issue related to Labels/Names.
"The test timed out on a specific page."
What to check:
Some pages with heavy JavaScript frameworks (for example complex React SPAs) can take longer to stabilise. Try running the test again.
If the problem persists, consider limiting the test to a specific container on the page instead of analysing the whole page.
WCAG Reference
This test evaluates the following WCAG 2.1 success criterion:
| Criterion | Level | Description |
|---|---|---|
| 2.1.1 Keyboard | A (Required) | All content functionality must be operable through a keyboard interface without requiring specific timings for individual keystrokes. |
Failing this criterion means that users who cannot use a mouse — including people with motor disabilities who rely on keyboard-only navigation — will not be able to use the interactive content.
Related Tests
The Keyboard Operable test is part of the Keyboard Navigation test suite, which also includes:
- Focus Order — verifies that the keyboard navigation order follows a logical sequence
- Focus Visible — verifies that the focused element has a clear visual indication
- Focus Lost — verifies that focus is never unexpectedly lost after an interaction
- Navigation — verifies navigation patterns in widgets (menus, carousels, etc.)
Running the full Keyboard Navigation suite provides complete accessibility coverage for keyboard navigation.